"use client"
import React from 'react'
import { Space, Table, Tag,Rate,Modal ,Button ,Checkbox,Popconfirm  } from 'antd';
import {
  DatePicker,
  Form,
  Input,
  Select,
} from 'antd';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import type { TableProps } from 'antd';
import { useEffect,useState } from 'react';
import { getdata ,deldata,searchdata} from '@/app/API/http';
import AddEdit from './AddEdit';
import type { FormProps } from 'antd';
import {PlusOutlined,InsertRowAboveOutlined,QuestionCircleOutlined,ColumnHeightOutlined,VerticalAlignBottomOutlined,ToTopOutlined,BarsOutlined,EditOutlined,InteractionOutlined,TeamOutlined,PartitionOutlined} from '@ant-design/icons';
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
export default function page() {
  const [list,setList] = useState<any>([
    {id:1,icon:<VerticalAlignBottomOutlined />,name:"导入"},
    {id:2,icon:<ToTopOutlined />,name:"导出"},
    {id:3,icon:<BarsOutlined />,name:"新建任务"},
    {id:4,icon:<InteractionOutlined />,name:"转移客户"},
    {id:5,icon:<TeamOutlined />,name:"移入公海"},
    {id:6,icon:<PartitionOutlined />,name:"合并客户"},
    {id:7,icon:<EditOutlined />,name:"批量编辑"},
  ])
  const [data,setData] = useState<any>([])
  
  const get=()=>{
    getdata().then((res)=>{
      setData(res)
    })
  }
  useEffect(()=>{
    get()
    let sear=localStorage.getItem('aa')
    if(!sear){
      searchdata({name:sear}).then(res=>{
        setData(res)
        // localStorage.clearItem('aa')
      })
    }
  },[])
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title,setTitle] = useState('')
  const [obj,setObj] = useState({})
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '客户名称',
      dataIndex: 'name',
    },
    {
      title: '客户状态',
      dataIndex: 'Collect',
      render:(Collect,item)=>{
        return <Tag>{Collect?"正在跟进":"不在跟进"}
        </Tag>
      },
      sorter: (a:any, b:any) => a.Collect-b.Collect
    },
    {
      title: '客户星级',
      dataIndex: 'value',
      render:(value)=>{
        return  <Rate  defaultValue={value} />
      },
      sorter: (a:any, b:any) => a.value-b.value
    },
    {
      title: '首联系人',
      dataIndex: 'sname',
    },
    {
      title: '手机号码',
      dataIndex: 'send',
    },
    {
      title: '最后跟进',
      dataIndex: 'time',
    },
    {
      title: '未跟进天数',
      dataIndex: 'wgjts',
      sorter: (a:any, b:any) => a.wgjts-b.wgjts
    },
    {
      title: '操作',
      dataIndex: 'id',
      render:(id:number,item:any)=>{
        return <Space>
          <Tag color="blue">跟进</Tag>
          <Tag onClick={()=>{
            showModal()
            setTitle('编辑')
            setObj(item)
          }} color="blue">编辑</Tag>
           <Tag color="blue" onClick={()=>{
            let arr=[...data].sort((a:any,b:any)=>{
              return a.id-b.id
            })
            let index=arr.findIndex(item=>item.id==id)
            let obj=arr[index]
            arr.splice(index,1)
            arr=[obj,...arr]
            setData(arr)
           }}>置顶</Tag>
<Popconfirm
    title="删除"
    description="你想好要删除了吗?"
    onConfirm={()=>{
      deldata(item.id).then((res)=>{
        get()
      })
    }}
    okText="确认"
    cancelText="取消"
  >
          <Tag color="blue" bordered={false}>删除</Tag>
          </Popconfirm>
         
          
        </Space>
      }
    },
  
  ];
  const onFinish: FormProps<any>['onFinish'] = (values) => {
   searchdata(values).then((res)=>{
     setData(res)
   })
  };
 
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '全部客户'
    },
    {
      key: '2',
      label: '我的客户'
    },
    {
      key: '3',
      label: '下属客户'
    },
    {
      key: '4',
      label: '重点客户'
    },
    {
      key: '5',
      label: '我协作的'
    },
    {
      key: '6',
      label: '下属协作的'
    },
  ];
  return (
    <div>
      <div>
      <Tabs defaultActiveKey="1" items={items} onChange={()=>{
            
          }} />
      </div>
    <div style={{height:"60px" ,width:"100%"}}>
      <Space>
      <Form
        onFinish={onFinish}
      style={{width:"1200px", maxWidth: 1200 ,display:"flex"}}
    >
      <Form.Item label="客户名称" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="客户状态" name="Collect" >
        <Select style={{width:"100px"}}>
          <Select.Option value="true">正在跟进</Select.Option>
          <Select.Option value="false">不在跟进</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item label="客户星级" name="value" style={{width:"200px"}}>
      <Input />
      </Form.Item>
      <Form.Item label="未跟进天数" name="time">
        <DatePicker />
      </Form.Item>
      <Form.Item label="" style={{display:"flex",width:"200px"}}>
        <Button  htmlType="submit">查询</Button>
        <Button  >重置</Button>
      </Form.Item>
    </Form>
      </Space>
    
    </div>
    <div>
    
     
      <div style={{height:"40px",display:"flex",justifyContent:"space-between"}}>
        <div>
      <Button type="primary" onClick={()=>{
        showModal()
        setTitle('添加')
        setObj({})
      }}>
        <PlusOutlined />
       添加
      </Button>
      {
        list.map((item:any)=>{
          return <Button key={item.id} icon={item.icon}>
            {item.name}
         </Button>
        })
      }
      </div>
      <div style={{display:"flex" ,lineHeight:"40px",marginRight:'10px'}}>
        <Space>
        <div>
          <Checkbox></Checkbox>
          <span>跟进模式</span>
          <QuestionCircleOutlined />
        </div>
        <Button  >
        <ColumnHeightOutlined />
        <span>排序</span>
         </Button>
         <Button  >
         <InsertRowAboveOutlined />
         <span>列表</span>
         </Button>
        </Space>
      
      </div>
      </div>
    
      <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} destroyOnClose footer={null}>
        <AddEdit title={title} obj={obj}  onCancel={handleCancel} get={get}/>
      </Modal>
      <Table columns={columns} dataSource={data} rowKey={"id"} pagination={{position:["bottomRight"],defaultCurrent:1,showSizeChanger:true,pageSizeOptions:["5","10","20"]}}/>
    </div>
    </div>
  )
}
